<template>
<!-- OSS图片上传 -->
<div>
   <a-form>
    <a-form-item label="Dragger">
      <a-form-item name="dragger" no-style>
        <a-upload-dragger model:fileList="formState.dragger" name="files" action="/upload.do">
          <p class="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
          <p class="ant-upload-hint">文件将上传到 OSS, 如未配置请先配置</p>
        </a-upload-dragger>
      </a-form-item>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
      <a-button type="primary" html-type="submit"><OSSImgX></OSSImgX></a-button>
    </a-form-item>
  </a-form>
</div>
</template>
<script>
import OSSImgX from '../../views/OSSImgX/index';
import { defineComponent, reactive } from 'vue';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    UploadOutlined,
    InboxOutlined,
    OSSImgX
  },

  setup() {
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };
    const formState = reactive({
      'input-number': 3,
      'checkbox-group': ['A', 'B'],
      rate: 3.5,
    });

    const onFinish = values => {
      console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };

    return {
      formState,
      onFinish,
      onFinishFailed,
      formItemLayout,
    };
  },

});
</script>